<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Home</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
<!--    <meta name="keywords"-->
<!--          content="Hotair Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />-->
    <!-- //Meta tag Keywords -->
<!--    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700;900&display=swap" rel="stylesheet">-->

<!--    &lt;!&ndash; 新 Bootstrap5 核心 CSS 文件 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="/css/bootstrap.css">-->
<!--    核心 css 文件 -->
    <link rel="stylesheet" href="/css/login-style.css" type="text/css" media="all" />
<!--&lt;!&ndash;    幽灵 css 文件 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="/css/youling2.css" type="text/css" media="all" />-->
<!--    字体图标 css 文件-->
    <link rel="stylesheet" href="/font/font-awesome.css" type="text/css" media="all">
<!--    加载动画 css 文件-->
    <link rel="stylesheet" href="/css/pageLoading.css">
</head>

<body>
    <!-- 加载动画 -->
    <div class="loader loader-div">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>

    <div class="GAK-form">
        <h1 style="padding-top: 1rem;padding-left: 1rem;font-size: 3rem">GAK Account Log In Form</h1>

        <div class="container">

            <div class="GAK-form-grid">

                <div class="main">


<!--                 图片和文案-->
                    <div class="img-text">
                        <span style="font-size: 3.5rem">今天&nbsp;你会去改变什么呢？</span><br/>
                        <span style="font-size: 1.6rem">开始你的又一旅程</span>
                    </div>


<!--                 表单-->
                    <div class="content">
                        <div class="change">
                            <div class="ghost-banner img-shape">
                                <!--                            头像-->
                                <img src="/img/fighting.svg" style="width: 100%;height: 100%">
                                <!--                            幽灵-->
                                <!-- <div class="ghost" style="position: absolute;top: 0;left: 0">
                                     <div class="eye"></div>
                                     <div class="eye two"></div>
                                     <div class="mouth">
                                         <div class="tonge"></div>
                                     </div>
                                     <div class="corner"></div>
                                     <div class="corner two"></div>
                                     <div class="corner three"></div>
                                     <div class="corner four"></div>
                                     <div class="over"></div>
                                     <div class="over two"></div>
                                     <div class="over three"></div>
                                     <div class="over four"></div>
                                 </div>-->
                            </div>
                            <span class="text">没有账户？&nbsp;<a th:href="@{/register}" class="link-text">注册</a></span>
                        </div>
                        <form action="/userLogin" method="post">
                            <span class="text change-min">没有账户？&nbsp;<a th:href="@{/register}" class="link-text">注册</a></span>
                            <input type="text" class="text form-float" id="userId" name="userId" placeholder="User Name" required="">
                            <input type="password" class="password form-float" id="password" name="password" placeholder="User Password" required="">
                            <button class="form-float" type="submit">Log In</button>
                            <a th:href="@{/findBack}" class="link-text" style=";display: block;margin-top: 2rem">忘记密码?</a>
                        </form>
                    </div>


                </div>

            </div>

        </div>

<!--        页脚版权信息-->
        <footer class="text-center">
            <p class="" style="text-align: center">Copyright &copy; 2022 GAK.AllRightsReserved.&nbsp;
                <a class="footer-text" href="#">关于我们</a>|
                <a class="footer-text" href="#">服务与声明</a>|
                <a class="footer-text" href="#">反馈</a>|
                <a class="footer-text" href="#">学校</a>
            </p>
        </footer>

    </div>

<script src="/js/jQuery.js"></script>
<!--<script src="/script/bootstrap.js"></script>-->
<!--    加载动画-->
<script src="/js/pageLoading.js"></script>
<script th:inline="javascript">
    //验证账号密码正确与否

</script>
</body>

</html>